<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div class="topNav">
        <div class="floatRight">
            <div class="topTitle">
                登录
            </div>
            <div class="topTitle">
                注册
            </div>
            <div class="topTitle">
                我的订单
            </div>
            <div class="topTitle">
                帮助中心
            </div>
            <div class="topTitle">
                在线客服
            </div>
            <div class="topTitle">
                手机版
            </div>
        </div>
    </div>
    <div class="middleNav">
        <img src="2.png" class="floatLeft">
        <div class="middle">

            <a href="index.html" class="nav-link">首页</a>
            <a href="bookstore.html" class="nav-link">图书库</a>
            <a href="teaching-materials.html" class="nav-link">教学资料库</a>
            <a href="about.html" class="nav-link">关于我们</a>
            <div class="floatRight search">
                <div>
                    <input placeholder="请输入关键字"><button>搜索</button>
                </div>
            </div>
        </div>

    </div>
    <div class="middleSite">
        <div class="leftNav floatLeft">
            <div class="leftTitle">
                图书分类

            </div>
            <div class="leftTitle">
                任务

            </div>
            <div class="leftTitle">
                章节

            </div>
            <div class="leftTitle">
                讨论

            </div>
            <div class="leftTitle">
                资料

            </div>
            <div class="leftTitle">
                笔记

            </div>
            <div class="leftTitle">
                学习记录
            </div>

        </div>
        <div class="banner floatRight">
            <img src="2.png">
            <img src="3.png">
            <img src="4.png">

            <button style="left:5px" id="leftBtn"> &lt; </button>
            <button style="right:5px;" id="rightBtn"> &gt; </button>
        </div>
    </div>

    <div class="recommendedBooks">
        <h2 class="sectionTitle">精品书籍推荐</h2>
        <div class="booksContainer">
            <!-- 书籍项1 -->
            <div class="bookItem">
                <img src="5.png" alt="书籍封面">
                <div class="bookInfo"> <!-- 新增容器 -->
                    <h3>JavaScript高级程序设计</h3>
                    <p>作者：尼古拉斯·泽卡斯</p>
                    <p class="price">¥129.00</p>
                </div>
            </div>
            <!-- 书籍项2 -->
            <div class="bookItem">
                <img src="6.png" alt="书籍封面">
                <div class="bookInfo"> <!-- 新增容器 -->
                    <h3>算法导论</h3>
                    <p>作者：托马斯·科尔曼</p>
                    <p class="price">¥139.00</p>
                </div>
            </div>
            <!-- 书籍项3 -->
            <div class="bookItem">
                <img src="7.png" alt="书籍封面">
                <div class="bookInfo"> <!-- 新增容器 -->
                    <h3>计算机网络：自顶向下方法</h3>
                    <p>作者：詹姆斯·库罗斯</p>
                    <p class="price">¥119.00</p>

                </div>
            </div>
            <!-- 书籍项4 -->
            <div class="bookItem">
                <img src="8.png" alt="书籍封面">
                <div class="bookInfo"> <!-- 新增容器 -->
                    <h3>设计模式：可复用面向对象软件的基础</h3>
                    <p>作者：Erich Gamma</p>
                    <p class="price">¥149.00</p>
                </div>
            </div>
        </div>
    </div>

    <div class="copyright">
            <div class="copyright-content">
                <p>© 2023 图书资源网站 版权所有</p>
                <p>联系方式：contact@booksite.com | 备案号：XXICP备XXXXXXXX号</p>
                <p>本网站内容仅供学习交流使用，未经许可不得擅自商用</p>
            </div>
        </div>

</body>
<script>
    var index = 1;
    var max = 3;
    var imgs = document.querySelectorAll('.banner img');
    // Hide all images except the first one
    imgs.forEach(function (img, i) {
        img.style.display = (i === 0) ? "block" : "none";
    });

    var buttonDomLeft = document.querySelector('#leftBtn');
    var buttonDomRight = document.querySelector('#rightBtn');

    buttonDomLeft.onclick = function () {
        var nextIndex = ((index - 2 + max) % max) + 1;
        var nextImgDom = document.querySelector(".banner img:nth-child(" + nextIndex + ")");
        nextImgDom.style.display = 'block';
        var nowImgDom = document.querySelector(".banner img:nth-child(" + index + ")");
        nowImgDom.style.display = 'none';
        index = nextIndex;
    };

    buttonDomRight.onclick = function () {
        var nextIndex = (index % max) + 1;
        var nextImgDom = document.querySelector(".banner img:nth-child(" + nextIndex + ")");
        nextImgDom.style.display = 'block';
        var nowImgDom = document.querySelector(".banner img:nth-child(" + index + ")");
        nowImgDom.style.display = 'none';
        index = nextIndex;
    };
</script>
<style>
    @import url('topNav.css');
    @import url('common.css');
    @import url('middleNav.css');
    @import url('middleSite.css');
    @import url('recommendedBooks.css');
    @import url('copyright.css');

    * {
        box-sizing: border-box;
    }
</style>

</html>